revision:
It sets or returns if the content of an element is editable.
Syntax:
element.contentEditable : returns the contentEditable property.
element.contentEditable = value : sets the contentEditable property.
property value:
value : "true" - the content is editable; "false" - the content is not editable; inherit"- default. Is editable if parent element is editable
example
Am I editable?
I am a paragraph. Click "editable" to make me editable.
<div>
<p id="par1" contenteditable="true">Am I editable?</p>
<p id="prop1"></p>
<p id="par2" style="font-size: 0.9vw;">I am a paragraph. Click "editable" to make me
editable.</p>
<button onclick="firstFunction()">editable</button>
<p id="prop2"></p>
</div>
<script>
let answer = document.getElementById("par1").contentEditable;
document.getElementById("prop1").innerHTML = answer;
function firstFunction() {
document.getElementById("par2").contentEditable = true;
document.getElementById("prop16").innerHTML = "The paragraph is now editable.
Try to edit it.";
}
</script>
Try to change this text.
<div>
<p id="par3" contenteditable="true">Try to change this text.</p>
<button onclick="secondFunction(this);">Disable "par2" to be editable!</button>
<p id="prop3"></p>
</div>
<style>
</style>
<script>
function secondFunction(button) {
const x = document.getElementById("par3");
if (x.contentEditable == "true") {
x.contentEditable = "false";
button.innerHTML = 'Enable "par3" p to be editable!';
} else {
x.contentEditable = "true";
button.innerHTML = 'Disable "par3" to be editable!';
}
}
</script>